<template>
    <view class="content">
        <view class="pages">
            <view class="notice">
                <view class="notice-icon"></view>
                <view class="notice-title">政策公告</view>
                <uni-notice-bar class="notice-bar" scrollable showGetMore color="#666666" background-color="#FFF5F2"
                    single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
            </view>
            <view class="select">
                <fselect></fselect>
                <fselect></fselect>
            </view>
        </view>
        <view class="list">
            <view class="list-item" v-for="item in 10" :key="item">
                <view class="list-img"></view>
                <view class="list-content">
                    <view class="list-top">
                        <view class="list-de">
                            <view class="list-de-name">用户名12345</view>
                            <view class="list-de-label">
                                <span>标签</span>
                                <span>标签</span>
                            </view>
                        </view>
                        <view class="list-time">
                            <view class="list-time-title">新楼开盘</view>
                            <view class="list-time-s">30s</view>
                        </view>

                    </view>
                    <view class="list-Preview">
                        <view class="">已预览：1000</view>
                        <!-- <view class="">总发布量：100</view> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import fselect from '../../components/Fselect/Fselect.vue'
    export default {
        components: {
            fselect
        },
        data() {
            return {
                value: 1,
                range: [{
                        value: 0,
                        text: "篮球"
                    },
                    {
                        value: 1,
                        text: "足球"
                    },
                    {
                        value: 2,
                        text: "游泳"
                    },
                ],
            };
        },
        methods: {
            change(e) {
                console.log("e:", e);
            },
        },
    };
</script>

<style scoped lang="scss">
    .content {
        background-color: #F2F3F7;
    }

    .pages {
        height: 300rpx;
        background: linear-gradient(180deg, #FF7919 0%, #F2F3F7 100%);
        border-radius: 0px 0px 0px 0px;
        padding: 0 28rpx;
    }

    .notice {
        height: 76rpx;
        background-color: #FFF5F2;
        display: flex;
        align-items: center;
        padding: 10rpx 24rpx;
        border-radius: 12rpx;

        .notice-icon {
            width: 32rpx;
            height: 36rpx;
            background: #FB5320;
            margin-right: 32rpx;
        }

        .notice-title {
            color: #FB5320;
            font-size: 28rpx;
            font-weight: 600;
            margin-right: 16rpx;
        }

        .notice-bar {
            width: 400rpx;
            font-size: 28rpx;
            height: 36rpx;
            line-height: 36rpx;
            background-color: red;
            padding: 0;
            margin: 0;
        }
    }

    .select {
        display: flex;
        margin: 30rpx 0;
        z-index: 999;
    }

    .list {
        padding: 0 28rpx;
        position: relative;
        // top: -80rpx;
        z-index: 111;

        .list-item {
            padding: 24rpx;
            background: #FFFFFF;
            border-radius: 6px 6px 6px 6px;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            .list-img {
                width: 80rpx;
                height: 80rpx;
                background-color: #FB5320;
            }

            .list-content {
                flex: 1;

                .list-top {

                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .list-de {
                        margin-left: 20rpx;

                        .list-de-name {
                            color: #333333;
                            font-size: 32rpx;
                            font-weight: 600;
                        }

                        .list-de-label {
                            margin-top: 10rpx;
                            color: #666666;
                            font-size: 24rpx;

                            >span {
                                margin-right: 12rpx;
                            }
                        }
                    }



                    .list-time {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .list-time-title {
                            font-size: 52rpx;
                            color: #666666;
                            margin-right: 20rpx;
                        }

                        .list-time-s {
                            width: 90rpx;
                            height: 48rpx;
                            background: #FE842D;
                            border-radius: 2px 2px 2px 2px;
                            font-size: 28rpx;
                            color: white;
                            line-height: 48rpx;
                            text-align: center;
                        }
                    }
                }

                .list-Preview {
                    display: flex;
                    align-items: center;
                    color: #666666;
                    font-size: 20rpx;
                    margin-left: 20rpx;
                    margin-top: 10rpx;

                    >view {
                        margin-right: 15rpx;
                    }
                }
            }
        }
    }
</style>